import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NzFlexModule } from 'ng-zorro-antd/flex';
import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
import {
  NzProgressModule,
  NzProgressStatusType,
  NzProgressStrokeLinecapType,
} from 'ng-zorro-antd/progress';
import { NzSelectModule } from 'ng-zorro-antd/select';
import { NzSwitchModule } from 'ng-zorro-antd/switch';

@Component({
  selector: 'app-progress-segment',
  standalone: true,
  imports: [
    NzProgressModule,
    NzInputNumberModule,
    FormsModule,
    NzFlexModule,
    NzSelectModule,
    NzSwitchModule,
  ],
  template: `
    <div class="demo demo-space">
      <div class="progress-success-as-danger">
        <nz-progress
          [nzPercent]="value"
          [nzStatus]="status"
          [nzSuccessPercent]="10"
        ></nz-progress>
      </div>

      <div nz-flex nzGap="small">
        <nz-input-number
          [nzMin]="10"
          [nzMax]="100"
          [nzStep]="5"
          [(ngModel)]="value"
        ></nz-input-number>
        <nz-select [(ngModel)]="status" style="width: 100px">
          @for(item of statuses;track $index) {
          <nz-option [nzValue]="item" [nzLabel]="item ?? '默认'"></nz-option>
          }
        </nz-select>
      </div>
    </div>
  `,
})
export class ProgressSegmentComponent {
  value = 10;
  success = 0;

  status?: NzProgressStatusType = undefined;
  statuses: NzProgressStatusType[] = [
    'success',
    'exception',
    'active',
    'normal',
  ];
}
